<template>
  <div class="ps-chart" ref="chart"></div>
</template>

<script setup>
import * as echarts from 'echarts'
import { onMounted, ref, watch, nextTick, onUnmounted } from 'vue'
import 'echarts-liquidfill'
import 'echarts/lib/chart/pie'
// import 'echarts-gl';

const chart = ref()
const props = defineProps({
  option: {
    type: Object
  }
})

let myChart

const info = () => {
  if (myChart !== null && myChart !== '' && myChart !== undefined) {
    myChart.dispose() // 销毁
  }

  myChart = echarts.init(chart.value)
  myChart.setOption(props.option)
  window.addEventListener('resize', () => {
    setTimeout(() => {
      myChart.resize()
    }, 100)
  })
}

watch(
  () => props.option,
  newVal => {
    nextTick(() => {
      info()
    })
  },
  {
    immediate: true,
    deep: true
  }
)

onUnmounted(() => {
  myChart && myChart.dispose && myChart.dispose()
})
</script>

<style scoped lang="scss">
.ps-chart {
  width: 100%;
  height: 100%;
}
</style>
